import React from 'react';
import Title from './title';
import intl from '../../../../locale';

export default function Ide() {
  return (
    <>
      <Title title="Alibaba Cloud Toolkit" />
      <div className="sub-title">
        {intl.get({
          id: 'code-assets.initHelp.openApi.ide.AlibabaCloudToolkitIsA',
          defaultMessage:
            'Alibaba Cloud Toolkit 是一个适用于 IntelliJ IDEA 的插件，旨在帮助企业开发者更有效地编码、评审、测试、诊断和部署应用程序。',
        })}
        <a
          href="https://help.aliyun.com/document_detail/217548.html"
          target="_blank"
          rel="noopener noreferrer"
        >
          {intl.get({
            id: 'code-assets.initHelp.openApi.ide.LearnMore',
            defaultMessage: '了解更多',
          })}
        </a>
      </div>
      <div style={{ borderBottom: '1px solid #777' }} />
      <div className="sub-title">
        <p>
          {intl.get({
            id: 'code-assets.initHelp.openApi.ide.WhyCloudToolkit',
            defaultMessage: '💬 为什么选择 Cloud Toolkit ？',
          })}
        </p>
        <p>
          <div>
            {intl.get({
              id: 'code-assets.initHelp.openApi.ide.ZeroCostFree',
              defaultMessage: '- 零成本：免费',
            })}
          </div>
          <div>
            {intl.get({
              id: 'code-assets.initHelp.openApi.ide.ExtremelyEfficientItIsConvenient',
              defaultMessage:
                '- 极致高效：方便的代码管理和评审，抛弃手工冗余的部署操作，支持本地一键自动化部署应用，针对阿里云产品如 ECS\\ROS\\RDS 提供丝般顺滑的发布体验',
            })}
          </div>
        </p>
        <p>
          {intl.get({
            id: 'code-assets.initHelp.openApi.ide.HowDoIEnableCloud',
            defaultMessage: '💬 如何启用 Cloud Toolkit ？',
          })}
        </p>
        <p>
          <div>
            {intl.get({
              id: 'code-assets.initHelp.openApi.ide.OpenIntellijIdeaPreferencePlugins',
              defaultMessage:
                '打开「IntelliJ IDEA」-> 「Preference」-> 「Plugins」，搜索 “Alibaba Cloud Toolkit”，点击安装；',
            })}
          </div>
        </p>
        <div>
          <img
            src="https://img.alicdn.com/imgextra/i4/O1CN01iqtYSu1h4ddtCzgyP_!!6000000004224-2-tps-1964-1444.png"
            alt={intl.get({
              id: 'code-assets.initHelp.openApi.ide.Example',
              defaultMessage: '示例',
            })}
            width="100%"
          />
        </div>
      </div>
    </>
  );
}
